<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no"/>
    <title>修改地址</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <!-- <link rel="stylesheet" type="text/css" href="../../css/common.css"/> -->
    <link type="text/css" href="../../css/mui.picker.css" rel="stylesheet"/>
    <link type="text/css" href="../../css/mui.poppicker.css" rel="stylesheet"/>
    <!-- <link rel="stylesheet" type="text/css" href="../../css/style.css" /> -->
    <style>
        body {
            font-size: 14px;
        }

        footer.aui-nav {
            z-index: 99999;
        }

        header.aui-bar {
            background: #fff;
        }

        .aui-title {
            color: #000;
        }

        .aui-nav .aui-bar-tab .active .aui-iconfont, .aui-nav .aui-bar-tab .active p {
            color: #327afa !important;
        }

        .active {
            color: #327afa !important;
        }

        .aui-tab-nav li.active {
            color: #327afa;
            border-bottom: 2px #327afa solid;
        }

        .aui-bar .aui-iconfont {
            color: #000;
        }

        /*.send {
            font-size: 16px !important;
        }*/

        .aui-list-view:after {
            border: none;
        }

        .aui-switch.aui-switch-success:checked {
            border-color: #327afa;
            box-shadow: #327afa 0 0 0 26px inset;
            background-color: #327afa;
        }

        .menuRgiht {
            float: right;
            margin-right: 20px;
        }

        input[type="text"] {
            border: none;
            margin: 0;
            width: 70%;
            padding: 0;
        }

        textarea {
            margin: 0;
            height: 80px;
            overflow-y: auto;
            border: none;
            padding: 0;
        }

        .form-label {
            color: #666;
        }
    </style>
</head>
<body>
<header class="aui-bar aui-bar-nav aui-border-b">
    <div class="aui-pull-left aui-iconfont aui-icon-left icon-left-coler" tapmode onclick="closeWin()"></div>
    <div class="aui-title">
        修改地址
    </div>
    <a class="aui-pull-right send" style="padding-left: 10px;color:#000;" onclick="addressUpdate()">保存</a>
</header>

<div class="contain" id="address-content">

</div>
<script id="address-template" type="text/x-dot-template">
    <ul class="aui-list-view">
        <li class="aui-list-view-cell">
            <span class="form-label">收货人:</span>
            <span><input type="text" name="truename" id="truename" value="{{=it.truename}}"
                         placeholder="请输入收货人姓名"></span>
        </li>
        <li class="aui-list-view-cell">
            <span class="form-label">联系电话:</span>
            <span><input type="tel" name="mobile" id="mobile" value="{{=it.mobile}}" placeholder="请输入收货人电话"
                         style="margin:0;display: inline-block;width: 70%;height:26px;line-height: 26px;border:none;"></span>
        </li>
        <li class="aui-list-view-cell" id="showCityPicker3">
            <a class="aui-arrow-right">
                <span class="form-label">所在地区</span>
                <span class="menuRgiht" id="checkCity" onclick="selectAddress()">{{=it.city}}</span>
                <input type="hidden" name="city" id="city" value="{{=it.city}}">
                <input type="hidden" name="cityCode" id="cityCode" value="{{=it.cityCode}}">
            </a>
        </li>
        <li class="aui-list-view-cell">
            <textarea class="problemText" name="address" id="address" onblur="checkWord(this)"
                      placeholder="请写详细地址，不少于5个字">{{=it.address}}</textarea>
        </li>
    </ul>
    <ul class="aui-list-view">
        <li class="aui-list-view-cell aui-switch-body active aui-text-center" onclick="addressDelete()">
            删除地址
        </li>
    </ul>
    <input type="hidden" name="cityCode" id="cityCodes" value="{{=it.cityCode}}">
</script>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/jquery-1.11.3.js"></script>
<script type="text/javascript" src="../../script/doT.min.js"></script>
<script type="text/javascript" src="../../script/city.data-3.js"></script>
<script type="text/javascript" src="../../script/mui.js"></script>
<script type="text/javascript" src="../../script/mui.picker.js"></script>
<script type="text/javascript" src="../../script/mui.poppicker.js"></script>
<script type="text/javascript">
    var addressId;
    apiready = function () {
        api.parseTapmode();
        addressId = api.pageParam.addressId;
        var header = $api.dom('header');
        getStorageAll();
        $api.fixIos7Bar(header);
        addressEdit(addressId);
    }

    //获取用户地址信息
    function addressEdit(addressId) {
        var url = "User/addressEdit/addressId/" + addressId;
        data = {};
        ajaxRequest(url, 'get', data, function (ret, err) {
            if (ret.status == 1) {
                var content = $api.byId('address-content');
                var tpl = $api.byId('address-template').text;
                var tempFn = doT.template(tpl);
                $api.html(content, '');
                $api.html(content, tempFn(ret.msg));
                selectAddress();
            } else {
                api.toast({
                    msg: ret.msg,
                    duration: 2000,
                    location: 'bottom'
                })
            }
        });
    }
    //    删除地址
    function addressDelete() {
        if (confirm('确定删除吗')) {
            showLoading();
            var url = "User/addressDelete/";
            var data = {
                addressId: addressId,
                userName: user_name,
            };
            ajaxRequest(url, 'post', data, function (ret, err) {
                api.sendEvent({
                    name: 'addressAdd',
                    extra: {
                        key: 'true'
                    }
                });
                if (ret.status == 1) {
                    api.closeWin();
                    api.toast({
                        msg: ret.msg,
                        duration: 2000,
                        location: 'bottom'
                    });
                } else {
                    api.closeWin();
//                    api.openFrame({
//                        name: 'addressAdd',
//                        url: 'addressAdd.html',
//                    });
                }
            });
            hideLoading();
        }

    }
    //保存用户修改地址
    function addressUpdate() {

        if (!checkWord()) {
            return;
        }

        mobile = document.getElementById('mobile').value;
        if (mobile == "") {
            api.toast({
                msg: "手机不能为空",
                duration: 2000,
                location: 'bottom'
            });

        } else {

            var pattern = /(^(([0\+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$)|(^0{0,1}1[3|4|5|6|7|8|9][0-9]{9}$)/;
            if (!pattern.test(mobile)) {
                api.toast({
                    msg: "请输入正确号码"
                });

            } else {
                var addressId = api.pageParam.addressId;
                var truename, mobile, city, cityCode, address;
                truename = document.getElementById('truename').value;
                city = document.getElementById('city').value;
                cityCode = document.getElementById('cityCode').value;
                address = document.getElementById('address').value;

                var url = "User/addressUpdate/";
                var data = {
                    itemid: addressId,
                    truename: truename,
                    mobile: mobile,
                    city: city,
                    cityCode: cityCode,
                    address: address,
                };
                // alert(JSON.stringify(data))
                ajaxRequest(url, 'post', data, function (ret, err) {
                    if (ret.status == 1) {
                        api.toast({
                            msg: ret.msg,
                            duration: 2000,
                            location: 'bottom'
                        });
                        api.sendEvent({
                            name: 'addressAdd',
                            extra: {
                                key: 'true'
                            }
                        });
                        closeWin();
                    } else {
                        api.toast({
                            msg: ret.msg,
                            duration: 2000,
                            location: 'bottom'
                        });
                    }
                });
            }
        }
    }

    // 验证输入的地址是不是为空或者大于5
    function checkWord() {
        var len = $("#address").val().length;
        var value = $("#address").val();
        if (len > 0) {
            if (len < 5) {
                api.toast({
                    msg: "字数少于5个字"
                })
                return false;
            } else {
                return true;
            }
        } else {
            return false;
            api.toast({
                msg: "不能为空"
            })
        }
    }
    // 验证手机号或者电话号码
    function checkPhone(obj) {
        var pattern = /(^(([0\+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$)|(^0{0,1}1[3|4|5|6|7|8|9][0-9]{9}$)/;
        if (!pattern.test($(obj).val())) {
            api.toast({
                msg: "请输入正确号码"
            })
        }
    }

    $(function () {
        $('#mobile').unbind('change').bind('change', function () {
            checkPhone(this);
        })
    })

    function selectAddress() {
        (function ($, doc) {
            $.init();
            $.ready(function () {
                var cityPicker3 = new $.PopPicker({
                    layer: 3
                });
                cityPicker3.setData(cityData3);
                var code = doc.getElementById('cityCodes').value;
//                alert(code);
                var arr = code.split('-');
                var provCode = arr[0];
                var cityCode = arr[1];
                var countyCode = arr[2];
                // 修改时候城市代码选择默认的了
                cityPicker3.pickers[0].setSelectedValue(provCode, 0, function () {
                    cityPicker3.pickers[1].setSelectedValue(cityCode, 0, function () {
                        cityPicker3.pickers[2].setSelectedValue(countyCode);
                    });
                })


                var showCityPickerButton = doc.getElementById('showCityPicker3');
                showCityPickerButton.addEventListener('tap', function (event) {
                    // mask.show();
                    showCityPickerButton.focus();
                    cityPicker3.show(function (items) {
                        var city = (items[0] || {}).text + " " + (items[1] || {}).text + " " + (items[2] || {}).text;
                        // 保存城市代码，修改时候设置默认值
                        var cityCode = items[0]["value"] + '-' + items[1]["value"] + '-' + items[2]["value"];
                        doc.getElementById('city').value = city;
                        doc.getElementById('cityCode').value = cityCode;
                        doc.getElementById('checkCity').innerText = city;
                        //返回 false 可以阻止选择框的关闭
                        //return false;
                    });
                }, false);
            });
        })(mui, document);
    }

</script>
</html>
